//初始化剪裁框

let image = $('#image')

let option = {
  aspectRatio: 1,
  preview: '.img-preview'
}
image.cropper(option)

// 点击上传 触发文件域
$('button:contains("上传")').on('click',function(){
  $('#file').trigger('click')
})

// 更换图片
$('#file').on('change',function(){
  if(this.files.length>0){
    let fileObj = this.files[0]
    let url = URL.createObjectURL(fileObj)
    image.cropper('replace',url)
  }
})


// 点击 确定 剪裁 提交给接口
$('button:contains("确定")').on('click',function(){
  // 1.剪裁图片 ==》 得到canvas（h5的画布）
  let canvas = image.cropper('getCroppedCanvas',{ width: 30, height: 30 })
  // 2.把canvas转换为base64格式
  let base64 = canvas.toDataURL()
  // 3.按照接口要求提交
  $.ajax({
    type:'POST',
    url:'/my/user/avatar',
    data:{ avatar: base64},
    success: function(res){
      if(res.status===0){
        layer.msg(res.message)
        window.parent.getUserInfo()
      }
    }

  })
})